<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        div {
            font-size: 30px;
            background-color: orange;
        }

        span {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 块和行内：
        我们的元素在文档流中分为两种状态：
        块元素：h1-h6,p,hr,div
            块元素的特点：
                1.独占一行，自上向下排列
                2.可以设置宽高
                3.宽度默认是父元素的全部，高度默认被内容撑开
            div是一个单纯的块元素，没有任何语义

        行内元素：a,i 斜体,em 着重,b 加粗 ， span
            行内元素的特点：
                1.不独占一行，自左向右排列，一行排列不下另起一行继续自左向右排列
                2.不能设置宽高
                3.宽度和高度被内容撑开

            span是一个单纯的行内元素，没有任何语义

    -->
    <h1>我是一个h1</h1>

    <!-- 元素，标记，标签 -->
    <!-- 把css和html标签 写到一起的这种样式我们叫做，内联样式 -->
    <p>我是一个p元素</p>
    <!-- div 就是一个单纯的块元素 -->
    <div>我是一个div</div>


    <!-- 行内元素 -->
    <i>斜体</i>
    <em>冬冬</em>
    <b>加粗</b>
    <span>我是一个span</span>
</body>

</html>